<template>
  <div class="menuC"></div>
  <el-menu
    :collapsable="isCollapsed"
    :default-active="defaultActive"
    background-color="#8cb0d8"
    class="menu-box"
    router
  >
    <template v-for="menu in filteredMenuList">
      <el-menu-item
        v-if="menu.itemGroups.length === 0 && menu.subMenus.length === 0"
        :key="menu.index"
        :index="menu.index"
        :route="{ path: menu.route || '/' }"
      >
        <el-icon>
          <component :is="menu.icon" />
        </el-icon>
        <span>{{ menu.title }}</span>
      </el-menu-item>

      <el-sub-menu v-else :index="menu.index">
        <template #title>
          <el-icon>
            <component :is="menu.icon" />
          </el-icon>
          <span>{{ menu.title }}</span>
        </template>

        <el-menu-item-group
          v-for="(itemGroup, groupIndex) in menu.itemGroups"
          :key="groupIndex"
        >
          <el-menu-item
            v-for="menuItem in itemGroup.items"
            :key="menuItem.index"
            :index="menuItem.index"
            :route="{ path: menuItem.route || '/' }"
          >
            <el-icon>
              <component :is="menuItem.icon" />
            </el-icon>
            <span>{{ menuItem.text }}</span>
          </el-menu-item>
        </el-menu-item-group>

        <el-sub-menu
          v-for="subMenu in menu.subMenus"
          :key="subMenu.index"
          :index="subMenu.index"
        >
          <template #title>
            <el-icon>
              <component :is="subMenu.icon" />
            </el-icon>
            <span>{{ subMenu.title }}</span>
          </template>
          <el-menu-item
            v-for="subMenuItem in subMenu.menuItems"
            :key="subMenuItem.index"
            :index="subMenuItem.index"
            :route="{ path: subMenuItem.route || '/' }"
          >
            <el-icon>
              <component :is="subMenuItem.icon" />
            </el-icon>
            <span>{{ subMenuItem.text }}</span>
          </el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup lang="ts">
import { ref, computed, h, watch } from "vue";
import {
  Document,
  Setting,
  User,
  DataBoard,
  Shop,
  UserFilled,
  Notebook,
  TrendCharts,
  PieChart,
  GoldMedal,
  Present,
  Lock,
  Stamp,
} from "@element-plus/icons-vue";

// 菜单项类型
interface MenuItem {
  index: string;
  text: string;
  icon: any;
  route?: string;
}

interface MenuGroup {
  items: MenuItem[];
}

interface SubMenu {
  index: string;
  title: string;
  menuItems: MenuItem[];
  icon: any;
}

interface Menu {
  index: string;
  title: string;
  itemGroups: MenuGroup[];
  subMenus: SubMenu[];
  icon: any;
  route?: string;
}

// 假设 menuList 的结构如下
const menuList: Menu[] = [
  {
    index: "1",
    title: "Dashboard",
    icon: h(DataBoard),
    itemGroups: [],
    subMenus: [],
    route: "/dashboard",
  },
  {
    index: "2",
    title: "产品管理",
    icon: h(Shop),
    itemGroups: [
      {
        items: [
          {
            index: "2-1",
            text: "产品列表",
            icon: h(Document),
            route: "/item-one",
          },
          {
            index: "2-2",
            text: "购买排行",
            icon: h(PieChart),
            route: "/item-two",
          },
        ],
      },
    ],
    subMenus: [],
  },
  {
    index: "3",
    title: "用户管理",
    icon: h(UserFilled),
    itemGroups: [
      {
        items: [
          {
            index: "3-1",
            text: "用户列表",
            icon: h(Document),
            route: "/item-one",
          },
          {
            index: "3-2",
            text: "购买力排行",
            icon: h(GoldMedal),
            route: "/item-two",
          },
        ],
      },
    ],
    subMenus: [],
  },
  {
    index: "4",
    title: "订单管理",
    icon: h(Notebook),
    itemGroups: [
      {
        items: [
          {
            index: "4-1",
            text: "订单列表",
            icon: h(Document),
            route: "/item-one",
          },
          {
            index: "4-2",
            text: "销售量排行",
            icon: h(TrendCharts),
            route: "/item-two",
          },
        ],
      },
    ],
    subMenus: [],
  },
  {
    index: "5",
    title: "系统管理",
    icon: h(Setting),
    itemGroups: [
      {
        items: [
          {
            index: "5-1",
            text: "权限管理",
            icon: h(Lock),
            route: "/auth/manage",
          },
          {
            index: "5-2",
            text: "用户管理",
            icon: h(User),
            route: "/auth/user",
          },
          {
            index: "5-3",
            text: "活动发布",
            icon: h(Present),
            route: "/auth/activity",
          },
          {
            index: "5-4",
            text: "价格调整",
            icon: h(Stamp),
            route: "/auth/price",
          },
        ],
      },
    ],
    subMenus: [],
  },
  {
    index: "6",
    title: "产品出入库",
    icon: h(DataBoard),
    itemGroups: [],
    subMenus: [],
    route: "/prod-in",
  },
];

// 用户权限
const userPermissions = ref(
  new Set([
    "1",
    "2",
    "2-1",
    "2-2",
    "2-3",
    "3",
    "3-1",
    "3-2",
    "4",
    "4-1",
    "4-2",
    "5",
    "5-1",
    "5-2",
    "5-3",
    "5-4",
    "6",
  ])
);

// 根据权限过滤菜单
const filteredMenuList = computed(() => {
  const hasPermission = (index: string) => userPermissions.value.has(index);

  return menuList
    .filter((menu) => hasPermission(menu.index))
    .map((menu) => ({
      ...menu,
      itemGroups: menu.itemGroups.map((group) => ({
        ...group,
        items: group.items.filter((item) => hasPermission(item.index)),
      })),
      subMenus: menu.subMenus
        .map((subMenu) => ({
          ...subMenu,
          menuItems: subMenu.menuItems.filter((item) =>
            hasPermission(item.index)
          ),
        }))
        .filter((subMenu) => subMenu.menuItems.length > 0),
    }));
});

const props = defineProps({
  isCollapsed: {
    type: Boolean,
    default: false,
  },
});
const isCollapsed = ref(props.isCollapsed);

watch(isCollapsed, (val: Boolean) => {
  console.log(val);
  console.log(props.isCollapsed);
});

// 设置默认激活的菜单项
const defaultActive = "1"; // Dashboard
</script>

<style lang="scss">
.menuC {
  // margin-top: 10px;
}

.menu-box {
  min-height: 400px;
}
</style>
